<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">

    <title>User</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        #app{
            background-color: #d0d5d8;
        }
    </style>
</head>
<body>
<div id="app">


    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
            </div>
            <div class="span8">
                <form>
                    <fieldset>
                        <legend>个人信息</legend>
                        <label>用户名</label>
                        <input type="text" name="username" v-bind:value="results.userInfo.username" /><br>
                        <label>实名</label>
                        <input type="text" name="name" v-bind:value="results.userInfo.name" /><br>
                        <label>邮箱</label>
                        <input type="email" name="email" v-bind:value="results.userInfo.email" /><br>
                        <label>年级</label>
                        <input type="text" name="grade" v-bind:value="results.userInfo.grade" /><br>
                        <label>学校</label>
                        <input type="text" name="schoolName" v-bind:value="results.userInfo.schoolName" /><br>
                        <label>班级</label>
                        <input type="text" name="className" v-bind:value="results.userInfo.className" /><br>
                        <label>电话</label>
                        <input type="text" name="phone" v-bind:value="results.userInfo.phone" /><br>
                        <label>生日:{{results.userInfo.birthDate}}</label>
                        <input type="date" name="birthDate" /><br>
                        <label>签名</label>
                        <input type="text" name="description" v-bind:value="results.userInfo.description" /><br>

                        <label class="checkbox">性别</label>
                            <input type="radio" name="sex" value="1" v-bind:checked="results.userInfo.sex"/> 男
                            <input type="radio" name="sex" value="0" v-bind:checked="!results.userInfo.sex"/> 女

                        <br>
                        <button  class="btn">保存</button>
                    </fieldset>
                </form>

                <label>头像</label><br>
                <img v-bind:src="userImage" width="60"><br>
                <input type="file" name="file" id="file"><br>
                <button @click="uploadImage">上传</button><br>
                <a href="collection.html">我的收藏</a>
                <a href="cardDocument.html">打卡信息</a>
                <a href="history.html">历史</a>
            </div>
            <div class="span2">
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            results:{},
            userImage:""
        },
        mounted:function () {

                let that=this
                $.ajax({
                    type:"POST",
                    url:"/user/userInfo",
                    success:function (data) {
                        that.results=data.data;
                        that.userImage=that.results.userInfo.userImage
                        console.log(data)
                    }
                })

        },
        methods:{
            uploadImage:function (e) {
                let that=this
                let formData=new FormData()
                formData.append('file', $('#file')[0].files[0]);
                $.ajax({
                    url:"/user/changeImage",
                    type:"POST",
                    contentType: false,
                    processData:false,
                    data:formData,
                    success:function (s) {
                        that.userImage=s
                    }

                })

            }
        }

    })
</script>
</body>
</html>